<template>
  <a-form
    :model="formState"
    class="login-box"
    name="basic"
    :label-col="{ span: 8 }"
    :wrapper-col="{ span: 16 }"
    autocomplete="off"
    @finish="onFinish"
  >
    <a-form-item
      label="用户名"
      name="username"
      :rules="[{ required: true, message: '请输入用户名!' }]"
    >
      <a-input v-model:value="formState.username" />
    </a-form-item>

    <a-form-item
      label="密码"
      name="password"
      :rules="[{ required: true, message: '请输入密码!' }]"
    >
      <a-input-password v-model:value="formState.password" />
    </a-form-item>

    <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
      <a-button type="primary" html-type="submit">登录</a-button>
    </a-form-item>

    </a-form>
</template>

<script lang='ts' setup>
import { reactive,ref} from 'vue'
import axiosEl from '@/utils/axios';
import {useUserInfo} from '@/stores/userinfo'
import {useRouter} from 'vue-router'
interface ILoginProps {
  username: string;
    password: string;
}
const formState = reactive({
  username:'',
  password:''
})
const $router = useRouter();
const userModal = useUserInfo();

const getMenuList = (username:string)=>{
  axiosEl({
    url:`/menu/${username}`,
    method:'get'
  }).then((res)=>{
    // res : 菜单数据
    userModal.updateMenu(res);
    $router.replace('/')
  })
}
const loginFun = (data:ILoginProps)=>{
  axiosEl({
        method:'post',
        url:'/login',
        data:data,
        headers:{
            "Content-Type":"application/x-www-form-urlencoded"
        }
    }).then((res)=>{
      
      // permissions, user , token 
      const {permissions,user,token} = res.data;
      localStorage.setItem('token',token);

      getMenuList(res.data.user.username);
      userModal.updateUser({
        permissions,user
      })
      
      console.log('成功');
      // 1. 相关信息存入到pinia状态中
      // 2. 跳转到主页
      
    })
}
const onFinish = (values:ILoginProps)=>{
  console.log(values);
  console.log(formState,'oooo');
  
  loginFun(values)

}
</script>

<style lang='less' scoped>
</style>